/* =============================== custom.css ================================== */
/* 去除顶部border */

/* 设置版心 */

/* 设置a标签样式 */
a {
	color: rgba(139,69,19,0.8);
}

/* 设置文章目录单行省略 */
.toc-link {
	display: inline-block;
	width: 100%;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 设置页面最小高度，我的电脑100vh为722.4，window.innerHeight为722，导致出现了一小段垂直滚动条，网上说清除body的margin解决不了这个问题，然后我用了calc减去10px刚好，兼容ie9+ */


/* 设置main最小高度，保证标签、分类页面的footer在底部 */
.main {
	min-height: 453px;
}

/* ================================ 设置header样式 ============================== */
.header {
	padding: 10px;
	background: -webkit-linear-gradient(200deg, #FFFFFF 0%, #EBEBEB 80%); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(200deg, #FFFFFF 0%, #EBEBEB 80%); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(200deg, #FFFFFF 0%, #EBEBEB 80%); /* Firefox 3.6 - 15 */
    background: linear-gradient(200deg, #FFFFFF 0%, #EBEBEB 80%); /* 标准的语法（必须放在最后） */
}

/* 设置菜单项hover样式 */
.header .site-navbar .menu .menu-item:hover {
    background-color: #CCCCCC;
	border-radius: 6px;
}

/* 设置title字体大小 */
.header .logo-wrapper .logo {
	position: relative;
    font-size: 36px;
    line-height: 68px;
}

/* 设置title上横线 */
.header .logo-wrapper .logo::before {
    content: '';
    position: absolute;
	top: -10px;
	left: 27px;
    width: 160px;
    height: 2px;
    background-color: #333;
}

/* 设置title下横线 */
.header .logo-wrapper .logo::after {
    content: '';
    position: absolute;
	bottom: -10px;
    left: 0;
	left: 27px;
    width: 160px;
    height: 4px;
    background-color: #333;
}

/* ========================= 设置菜单栏icon偏移位置 ================================ */
.menu-item {
	padding: 0 10px;
}

.menu-item-link .iconfont::before {
	padding-right: 8px;
}


/* ============================== 调整阅读更多样式 ======================================= */
.post .post-content .read-more .read-more-link {
    border: 2px solid #222;
    padding: 0.5em 1em;
    background-color: #222;
    color: #fff;
}

.post .post-content .read-more .read-more-link:hover {
    border-bottom: 2px solid #222;
	color: #222;
    background: #fff;
}

/* 去除文章border-bottom */
.posts {
	border-bottom: none;
}

/* 设置文章盒子阴影 */
.post {
	padding: 1em 1em;
    margin: 1.5em 0;
	box-shadow: 0 8px 8px rgba(10,16,20,.24), 0 0 8px rgba(10,16,20,.12);
	-webkit-box-shadow: box-shadow: 0 8px 8px rgba(10,16,20,.24), 0 0 8px rgba(10,16,20,.12);
}

/* 设置文章目录的ul样式 */
.post .post-toc .post-toc-content ul {
    list-style: telugu;
}

/* 设置文章标题hover样式 */
.post .post-header .post-link:hover {
    background-color: #CCCCCC;
	padding: 1px 10px;
	border-radius: 6px;
}

/* 设置文章代码片段样式 */
.post .post-content code, .post .post-content pre {
    background: none; 
}	

/* 让阅读更多居中 */
.read-more {
	text-align: center;
	padding: 0 0 20px;
}

/* 调整返回顶部icon位置和大小 */
.back-to-top {
    right: 30px;
    bottom: 45px;
    font-size: 2em;
}

/* ============================= 设置菜单项的标签、分类页面样式 ===================================== */
.terms .terms-tags .terms-link {
    margin: 10px 10px;
    border-radius: 50em;
    padding: 5px 10px;
    background-color: #FFF2AB;
}

/* 设置菜单项的标签、分类页面的统计数字样式 */
.terms .terms-tags .terms-link .terms-count {
    top: -2px;
    right: -1px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #B45B3E;
    color: #fff;
}

/* ========================= 设置底部heart跳动样式动画 =============================== */
.footer .copyright .copyright-year .heart {
    color: #ff7171;
	display: inline-block;
	animation: heartAnimate 1.33s ease-in-out infinite;
}

@keyframes heartAnimate {
	0%, 100% {
    transform: scale(1);
	}

	10%, 30% {
		transform: scale(.9);
	}
	20%, 40%, 60%, 80% {
		transform: scale(1.1);
	}
	50%, 70% {
		transform: scale(1.1);
	}
}